<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" href="css/4.css">
    <link rel="stylesheet" href="css/build/css/layui.mobile.css">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        !function () {
            var htmlEl = document.getElementsByTagName('html')[0];
            var fitPage = function () {
                /* The calculate of with from zepto  */
                var w = htmlEl.getBoundingClientRect().width;
                w = Math.round(w);
                w = w > 750 ? 750 : w;
                var newW = w / 750 * 100;
                htmlEl.style.fontSize = newW + 'px';
            }
            fitPage();
            var t;
            var func = function () {
                clearTimeout(t);
                t = setTimeout(fitPage, 25);
            }
            window.addEventListener('resize', func);
        }();
    </script>
</head>
<body>
<header class="dc-header dc-header-fixed">

    <div class="dc-header-box">
        <div class="dc-header-logo"></div>
        <div class="dc-shop-title">
            <h2 class="dc-header-shopName">秀水餐厅</h2>
            <div class="dc-header-delivery dc-time">
                <span class="dc-first-span">早6:00-9:00</span>
                <span>午11:00-13:00</span>
                <span>晚17:00-19:00</span>
                <span class="dc-cell-fr"></span>
            </div>
        </div>
        <div class="dc-header-right change-dc">
            <a href="#">换餐厅</a>
        </div>
    </div>
    <div class="dc-header-tab dc-week-list">
        <div class="dc-header-date">2017-02-24 <span>周五</span></div>
        <div class="dc-cell-fr"></div>
    </div>
    <div id="load-box" style="display: none">
        <div class="floor-box">
            <div class="dc-header-tab">
                <div class="dc-header-date"><img style="width: 6%;margin-bottom: 0.17rem" src="images/dc-16-1.png"> <span style="font-size: 0.25rem">2017-02-24&nbsp;周五</span></div>
                <div class="dc-cell-fr"></div>
            </div>
            <hr class="dc-17-box-line"/>
            <div class="floor-box-content">
                <div>2017-02-24&nbsp;周一</div>
                <div>2017-02-25&nbsp;周二</div>
                <div>2017-02-26&nbsp;周三</div>
                <div>2017-02-27&nbsp;周四</div>
                <div>2017-02-28&nbsp;周五</div>
                <div>2017-03-1&nbsp;周六</div>
                <div>2017-03-12&nbsp;周日</div>
            </div>
        </div>
    </div>
</header>
<section class="dc-content">
    <nav class="dc-nav" style="clear: both">
        <a data-id="1" class="dc-active" href="#">早餐</a>
        <a data-id="2" href="#">午餐</a>
        <a data-id="3" href="#">晚餐</a>
        <a data-id="4" href="#">夜宵</a>
    </nav>
    <div class="box">
        <div class="box-icon">
            <img src="images/dc-4-1.png">
        </div>
        <div class="empty-text">
            今日早餐订餐时间已过
        </div>
    </div>

</section>


<footer class="dc-footer">
    <div class="bbox-3">
        <hr class="ee3"/>
        <div class="r3-1">
        </div>
        <div class="r3-2">

        </div>
    </div>
    <div class="bbox-2">
        <hr class="ee"/>
        <div class="r1-1">
        </div>
        <div class="r1-2">

        </div>
    </div>
    <div class="box-bg">
    </div>
    <div class="dc-car-wrapper">
        <div class="dc-car clearfix">
            <div class="dc-circle">
                <img src="images/car.png" alt="car">
            </div>
            <div class="dc-total-price">¥0.0</div>
        </div>
        <div class="dc-btn">
            <a href="#">选好了</a>
        </div>
    </div>
</footer>
<script src="js/index.js"></script>
<div class="dc-shop-list" style="display: none">
    <div class="dc-shopname-list">益新餐厅</div><br/>
    <div class="dc-shopname-list">尔美餐厅</div><br/>
    <div class="dc-shopname-list">山明餐厅</div><br/>
</div>
<div class="dc-time-list" style="display: none">
    <div class="dc-shopname-list">早6:00-9:00</div><br/>
    <div class="dc-shopname-list">午11:00-13:00</div><br/>
    <div class="dc-shopname-list">晚17:00-19:00</div><br/>
    <div class="dc-shopname-list">夜宵20:00-23:00</div><br/>
</div>
<script src="js/layer_mobile/layer.js"></script>
<script src="js/index.js"></script>
<script>
    $(function () {
        $(".change-dc").click(function () {
            //信息框
            layer.open({
                title: [
                    '选择食堂',
                    'background-color: #E28B8B; color:#fff;'
                ],
                content: $('.dc-shop-list').html()
                ,btn: '确定'
            });
            $(".layui-m-layercont").on("click",'.dc-shopname-list',function () {
                alert("你选择了"+$(this).text())
            })
        })
        $(".dc-time").click(function () {
            //信息框
            var w1=layer.open({
                title: [
                    '订餐时间',
                    'background-color: #E28B8B; color:#fff;'
                ],
                content: $('.dc-time-list').html()
                ,btn: '确定'
            });
            $(".layui-m-layercont").on("click",'.dc-shopname-list',function () {
                layer.close(w1);
                layer.open({
                    content: '今日早餐订餐时间已过'
                    ,btn: '知道了'
                });
            })
        })
        $(".dc-week-list").click(function () {
            $("#load-box").show()
        })
        $(".floor-box-content div").click(function () {
            //询问框
            layer.open({
                content: '切换日期后购物车将清空!<br/><br/>友情提示:不同日期的订餐要分开结算哦!'
                ,btn: ['切换日期', '先结算']
                ,yes: function(index){
                    location.reload();
                    layer.close(index);
                }
            });
            alert("您选择了"+$(this).text())
            $("#load-box").hide()
        })
        $(".dc-yingyang").click(function () {
            $(".dc-nutrition-cover-shopcar").hide()
        })
        $(".footer-btn").click(function () {
            $(".dc-nutrition-cover-shopcar").show()
        })

        $(".dc-menu-wrapper .dc-menu-item").each(function () {
            $(this).click(function () {
                $(".dc-menu-item").removeClass('dc-active')
                $(this).addClass('dc-active')
            })
        })
    })
</script>
</body>
</html>